<template>
  <div id="updatePasswd">
    <el-input v-model="oldPasswd" type="password" placeholder="" show-password>
      <template #prepend>旧密码</template>
    </el-input>
    <el-input v-model="newPasswd" type="password" placeholder="" show-password>
      <template #prepend>新密码</template>
    </el-input>
    <el-input
      v-model="confirmPasswd"
      type="password"
      placeholder=""
      show-password
    >
      <template #prepend>再一次</template>
    </el-input>
    <el-button type="primary" @click="clickSubmitButton()"
      >确认修改密码</el-button
    >
  </div>
  <el-dialog title="确保你是人类" v-model="verifyVisible" width="340px">
    <div>
      <slide-verify
        slider-text="向右滑动完成拼图"
        @success="updatePasswd"
      ></slide-verify>
    </div>
  </el-dialog>
</template>

<script>
import { show_success_msg, show_error_msg } from "../js/msg.js";
import { baseUrl } from "../main.js";
import axios from "axios";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
export default {
  components: { SlideVerify },
  data() {
    return {
      verifyVisible: false,
      baseUrl: baseUrl,
      userId: localStorage.userId,
      oldPasswd: "",
      newPasswd: "",
      confirmPasswd: "",
    };
  },
  methods: {
    clickSubmitButton() {
      if (
        this.oldPasswd == "" ||
        this.newPasswd == "" ||
        this.confirmPasswd == ""
      ) {
        show_error_msg("提交失败", "密码不能为空");
        return;
      }
      if (this.oldPasswd == this.newPasswd) {
        show_error_msg("提交失败", "新旧密码不能相同");
        return;
      }
      if (this.newPasswd != this.confirmPasswd) {
        show_error_msg("提交失败", "新密码两次输入不一致");
        return;
      }
      this.verifyVisible = true;
    },
    updatePasswd() {
      let formData = new FormData();
      formData.append("id", this.userId);
      formData.append("oldPasswd", this.oldPasswd);
      formData.append("newPasswd", this.newPasswd);
      axios
        .post(this.baseUrl + "/user/updateUserPasswd", formData)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            show_success_msg("密码修改成功", "");
            this.verifyVisible = false;
          } else {
            show_error_msg("密码修改失败", re_data.msg);
            this.oldPasswd = "";
            this.verifyVisible = false;
          }
        })
        .catch((error) => {
          show_error_msg("密码修改失败", "与服务器通讯异常");
          this.verifyVisible = false;
        });
    },
  },
};
</script>

<style scoped>
#updatePasswd > .el-input {
  margin-top: 2vh;
  width: 100%;
}

#updatePasswd > .el-button {
  margin-top: 3vh;
  width: 100%;
}
</style>